<style>
    body,html{
        background-color: #F9F9F9;
    }
</style>
<script>
    var city = {{ city }};
    var province = {{ province }};
    var county   = {{ county }};
    window.onload = function(){

        var form = new xhForm($('#xh_form'));
        form.parse();


        $('[name=iProvince],[name=iCity],[name=iCounty],[name=iCompRun]').select2();
        fillSelect(province,'iProvince',0);


        $('#iProvince').on('change',function () {
            var provinceId =  $(this).val();
            fillSelect(city,'iCity',provinceId);
            $('[name=sProvince]').val(province[provinceId].areaName);
        });
        $('#iCity').on('change',function () {
            var cityId =  $(this).val();
            fillSelect(county,'iCounty',cityId);
            $('[name=sCity]').val(city[cityId].areaName);
        });
        $('#iCounty').on('change',function () {
            var countyId =  $(this).val();
            $('[name=sCounty]').val(county[countyId].areaName);
        });

        //提交按钮处理事件
        $('#bt_modal_confirm',window.top.document).click(function () {
            form.submit('lm/rent/saveInfo',{},function (res) {
                window.top.xhTop.showSuccess(res.msg);
                window.top.xhTop.getActiveFrame().obj.dataGrid.reload();
                window.top.xhTop.closeModal();
            });
        });

        function fillSelect(data,selector,pid) {
            var control = $('#'+selector);
            control.empty();//清空下拉框
            control.append("<option value='' style='display: none;' selected>请选择</option>");
            $.each(data, function (id,item) {
                if(pid==null){
                    control.append("<option value='" + item['areaCode'] + "'>" + item['areaName'] + "</option>");
                }else if(pid == item['parentCode']){
                    control.append("<option value='" + item['areaCode'] + "'>" + item['areaName'] + "</option>");
                }

            });
        }
    }
</script>

<form id="xh_form" class="xh-form"  method="post"    style="margin-left: 20px;">
    <div class="xh-area-form">
        <table >
            <tr>
                <td style="width: 75px;"><label>省</label></td>
                <td style="width: 200px;">
                    <select  id="iProvince" name="iProvince" targetFormat="sProvince" style="width: 200px;">
                        <option value="">请选择</option>
                    </select>
                    <input type="hidden" name="sProvince">
                </td>
                <td style="width: 75px;"><label>市</label></td>
                <td style="width: 200px;">
                    <select  id="iCity" name="iCity" targetFormat="sCity" style="width: 200px;" >
                        <option value="">请选择</option>
                    </select>
                    <input type="hidden" name="sCity">
                </td>
                <td style="width: 75px;"><label>县</label></td>
                <td style="width: 200px;">
                    <select  id="iCounty" name="iCounty" targetFormat="sCountry" style="width: 200px;" >
                        <option value="">请选择</option>
                    </select>
                    <input type="hidden" name="sCounty">
                </td>
            </tr>
            <tr>
                <td><label>户型</label></td>
                <td><input type="text" name="sHouseType"></td>
                <td><label>详细地址</label></td>
                <td colspan="3"><input type="text" name="sAddress"></td>
            </tr>
            <tr>
                <td><label>陪同运营</label></td>
                <td><select type="text" name="iCompRun">
                        <option value="">请选择</option>
                        {% for key,arr in staff %}
                            <optgroup label="{{ key }}">
                                {% for id,text in arr %}
                                <option value="{{ id }}">{{ text }}</option>
                                {% endfor %}
                            </optgroup>
                        {% endfor %}
                    </select>
                </td>
                <td><label>房东</label></td>
                <td ><input type="text" name="sLandlord"></td>
                <td><label>房东电话</label></td>
                <td ><input type="text" name="sLandPhone"></td>
            </tr>
            <tr>
                <td><label>中介人</label></td>
                <td><input type="text" name="sAgency"></td>
                <td><label>中介公司</label></td>
                <td ><input type="text" name="sAgencyComp"></td>
                <td><label>中介电话</label></td>
                <td ><input type="text" name="sAgencyPhone"></td>
            </tr>
            <tr>
                <td valign="middle"><label>备注</label></td>
                <td colspan="5"><textarea border="0" name="mDesc" rows="3"></textarea></td>
            </tr>
        </table>
    </div>
</form>